<template>
    <div class="activity">
      <ul>
        <li v-for="(item) in activity">
          <img :src="item.img" alt="">
          <p class="des">{{item.des}}</p>
          <span class="addr">{{item.addr}}</span>
          <p class="three">
            <span class="ora">官方</span>
            <span class="down">线下</span>
            <i>免费</i>
          </p>
          <i class="go">43人已报名 | 86人想去</i>
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "activity",
      data(){
          return{
            activity:[]
          }
      },
      mounted() {
          var _this = this;
          _this.$http.get('./data/club.json').then(function (response) {
              _this.activity = response.data.activity
          })
        .catch(function (error) {
            console.log(error)
        })
        .then(function () {
            //always exectued
        })
      }
    }
</script>

<style scoped>
  .activity{
    width: 90%;
    margin: 0 auto;
  }
  .activity ul{
    width: 100%;
  }
  .activity ul li{
    margin: 15px 0;
    width: 100%;
  }
  .activity ul li img{
    width: 100%;
  }
  .activity ul li .des{
    font-size: 14px;
    color: white;
    line-height: 40px;
    text-align: left;
  }
  .activity ul li .addr{
    font-size: 12px;
    color: white;
    display: block;
    text-align: left;
    line-height: 15px;
  }
  .activity ul li .three{
    overflow: hidden;
    margin: 10px 0;
  }
  .activity ul li .three .ora{
    float: left;
    line-height: 25px;
    font-size: 10px;
    width: 40px;
    height: 25px;
    color: white;
    margin-right: 20px;
    background: palevioletred;
  }
  .activity ul li .three .down{
    float: left;
    line-height: 23px;
    font-size: 10px;
    width: 38px;
    height: 23px;
    color: white;
    border: 1px solid palevioletred;
  }
  .activity ul li .three i{
    float: right;
    font-size: 10px;
    color: white;
  }
  .go{
    display: block;
    text-align: left;
    font-style: normal;
    font-size: 14px;
    color: lime;
  }
</style>
